<template>
  <section class="search-nearby-list-item" @click="handleSkipPage">
    <img
      :src="`http://elm.cangdu.org/img/${item.image_path}`"
      alt=""
      class="left"
    />
    <div class="right">
      <p>
        <span> {{ item.name }}</span>
        <span class="payment">
          <i>支付</i>
          <i class="frame"></i>
        </span>
      </p>
      <p class="monthly-sales">月售 {{ item.recent_order_num }} 单</p>
      <p>
        <span>{{ item.float_minimum_order_amount }} 元起送</span>
        <span> / </span>
        <span>距离 {{ item.distance }}</span>
      </p>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    handleSkipPage() {
      console.log(this.item);
      this.$router.push(`/shop?id=${this.item.id}`)
    }
  }
};
</script>
<style lang="less" scoped>
.search-nearby-list-item {
  display: flex;
  padding: 15px;
  border-bottom: 2px solid #f7f7f7;

  background-color: #fff;
  font-size: 12px;
  line-height: 20px;
  color: #333333;
  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .right {
    flex: 1;
    p {
      padding-bottom: 5px;
    }
    & p:nth-child(1) {
      .payment {
        position: relative;
        top: -2px;
        left: 5px;
        display: inline-block;
        margin-left: 10px;
        font-weight: 900;
        font-size: 8px;
        color: #ff9500;
        .frame {
          position: absolute;
          top: 16%;
          left: -3px;
          display: inline-block;
          padding: 7px 10px;
          border: 1px solid #ff9500;
          transform: skew(-20deg);
        }
      }
    }

    & p:nth-child(3) {
      border-bottom: 2px solid #f7f7f7;
    }
  }
}
</style>